<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">编辑个人信息</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-item">
				<text class="label">手机号：</text>
				<input type="tel" v-model="formData.phoneNumber" placeholder="请输入手机号" maxlength="11" class="input" />
			</view>
			<view class="form-item">
				<text class="label">邮箱：</text>
				<input type="text" v-model="formData.email" placeholder="请输入邮箱" class="input" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-button">
			<button @click="submitForm" :style="{ background: 'linear-gradient(90deg, #007aff, #00c6ff)' }">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					phoneNumber: '',
					email: ''
				}
			};
		},
		onLoad(options) {
			// options 里会带上phoneNumber和email
			if (options.phoneNumber) {
				this.formData.phoneNumber = options.phoneNumber;
			}
			if (options.email) {
				this.formData.email = options.email;
			}
		},
		methods: {
			async submitForm() {
				// 数据校验同之前
				if (!this.formData.phoneNumber) {
					uni.showToast({
						title: "手机号为必填项",
						icon: 'none'
					});
					return;
				}
				if (!/^\d{11}$/.test(this.formData.phoneNumber)) {
					uni.showToast({
						title: "手机号必须为11位数字",
						icon: 'none'
					});
					return;
				}
				if (this.formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
					uni.showToast({
						title: "邮箱格式不正确",
						icon: 'none'
					});
					return;
				}

				// 调用接口提交更新
				try {
					const token = uni.getStorageSync('token');
					if (!token) {
						uni.showToast({
							title: "请先登录",
							icon: 'none'
						});
						return;
					}
					const res = await uni.request({
						url: "http://localhost:8082/user/updateProfile",
						method: "POST",
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						data: {
							phoneNumber: this.formData.phoneNumber,
							email: this.formData.email
						}
					});

					if (res[1].statusCode === 200 && res[1].data.code === 1) {
						uni.showToast({
							title: "更新成功",
							icon: "success"
						});
						// 返回上一页，或刷新mine页面
						uni.navigateBack();
					} else {
						uni.showToast({
							title: res[1].data.message || "更新失败",
							icon: "none"
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求失败：" + err.message,
						icon: "none"
					});
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #eaf2fc;
		/* 更柔和的蓝色背景 */
		min-height: 100vh;
	}

	.nav-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		background-color: #007aff;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 10px;
		margin-bottom: 30px;
	}

	.form-container {
		background-color: #fff;
		padding: 25px;
		border-radius: 12px;
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 25px;
	}

	.label {
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
		color: #333;
	}

	.input {
		border: 1px solid #ccc;
		padding: 15px;
		border-radius: 8px;
		width: 100%;
		box-sizing: border-box;
		height: 50px;
		font-size: 16px;
		color: #333;
		background-color: #f9f9f9;
	}

	.input::placeholder {
		color: #aaa;
		font-size: 14px;
	}

	.submit-button {
		margin-top: 40px;
	}

	.submit-button button {
		width: 100%;
		padding: 15px;
		border-radius: 8px;
		font-size: 18px;
		color: #fff;
		background: linear-gradient(90deg, #007aff, #00c6ff);
		border: none;
		cursor: pointer;
		transition: opacity 0.3s ease;
	}

	.submit-button button:hover {
		opacity: 0.8;
	}
</style>